<template>
  <div class="mistake-book">
    <div class="mistake-book-header">
      <h2 class="section-title">
        <el-icon><Document /></el-icon>
        错题本
      </h2>
      <div class="header-actions">
        <el-button
          v-if="authStore.isLoggedIn"
          size="small"
          @click="showSubjectManager = true"
        >
          <el-icon><Folder /></el-icon>
          科目管理
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="showEditor = true"
        >
          <el-icon><Plus /></el-icon>
          新增错题
        </el-button>
      </div>
    </div>

    <!-- 错题列表 -->
    <MistakeList
      :is-admin-logged-in="authStore.isLoggedIn"
      @refresh="handleRefresh"
    />

    <!-- 科目管理对话框 -->
    <MistakeSubjectManager
      v-model="showSubjectManager"
    />

    <!-- 新增/编辑错题对话框 -->
    <MistakeEditor
      v-model="showEditor"
      :question="null"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Document, Folder, Plus } from '@element-plus/icons-vue'
import { useAuthStore } from '@/store/auth'
import MistakeList from './MistakeList.vue'
import MistakeSubjectManager from './MistakeSubjectManager.vue'
import MistakeEditor from './MistakeEditor.vue'

const authStore = useAuthStore()

const showSubjectManager = ref(false)
const showEditor = ref(false)

// 刷新列表
const handleRefresh = () => {
  // 可以在这里添加额外的刷新逻辑
}

// 编辑成功处理
const handleEditSuccess = () => {
  // 可以在这里添加额外的成功处理逻辑
}
</script>

<style scoped>
.mistake-book {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.mistake-book-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mistake-book-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .section-title {
    justify-content: center;
    text-align: center;
  }

  .header-actions {
    justify-content: center;
  }
}
</style>